<template>
  <div class="sheet">
    <div class="sheet-bg" :style="{'background' : 'url('+qw.songList.coverImgUrl+')'}"></div>
    <div class="sheet-bg1">
    <div class="sheet-title">
      <div class="sheet-title-left">
        <text class="iconfont icon-zuojiantou" @click="aaa"></text>
        <text class="sheet-title-left-text">歌单</text>
      </div>
      <div class="sheet-title-right">
          <text class="iconfont icon-fangdajing"></text>
        <text class="iconfont icon-31liebiao"></text>
      </div>
    </div>
    <!-- 歌单简介 -->

    <div class="sheet-introduce">
    <div class="sheet-introduce-left">
      <img :src="qw.songList.coverImgUrl" />
    </div>
    <div class="sheet-introduce-right">
      <div class="rigit-top">{{qw.songList.name}}</div>
      <div class="rigit-center">
        <img :src="qw.songList.creator.backgroundUrl"/>
        <text class="rigit-center-text">{{qw.songList.creator.nickname}}</text>
      </div>
       <div class="rigit-end">
        <text>{{qw.songList.description}}</text>
      </div>

    </div>
    </div>
    <!-- 图标层 -->
    <div class="sheet-icons">
      <text class="iconfont icon-xiaoxi"></text>
      <text class="iconfont icon-fenxiang"></text>
      <text class="iconfont icon-xiazai"></text>
      <text class="iconfont icon-show_duoxuan"></text>
    </div>
    </div>
    <div class="sheet-list">
      <div class="sheet-list-title">
        <div class="sheet-list-title-left">
          <text class="iconfont icon-24gl-playCircle"></text>
          <text>播放全部</text>
          <text>(共{{qw.allSongList.length}}首)</text>
        </div>
        <div class="sheet-list-title-right">
            <text class="iconfont icon-jiahao1">收藏({{qw.songList.subscribedCount}})</text>
        </div>
      </div>
      <div class="sheet-list-body" v-for="(i,index) in qw.allSongList" :key="index" @click="musicUrl(index)">
        <div class="sheet-list-body-left">{{index+1}}</div>
        <div class="sheet-list-body-center">
          <div>{{i.name}}</div>
          <div>{{i.ar[0].name}}</div>
        </div>
        <div class="sheet-list-body-right">
          <text class="iconfont icon-31liebiao"></text>
        </div>
      </div>
       <music-buttom></music-buttom>
    </div>
  </div>
</template>

<script>
import musicButtom from '@/components/musicBottom/musicButtom'
import {onMounted,reactive} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {songDetail,getAllSong} from '@/axios/api/home.js'
export default {
name:'Sheet',
components(){
  musicButtom
},
setup(){
  const qw = reactive({
    songList:{
      creator:{}
    },
    allSongList:[]
  })
  const router = useRouter()
  const route = useRoute()
  const store = useStore()
  onMounted( async ()=>{
    let ids = useRoute().query.id
    let res = await songDetail(ids)
    if(res.data.code==200){
    qw.songList = res.data.playlist
    }
    //获取歌曲
     let result = await getAllSong(ids)
        // console.log(result)
        if(result.data.code==200){
          qw.allSongList = result.data.songs
        }
  });

  function aaa(){
      router.push("/")
  }
  function musicUrl(i){
    store.commit('MUSICLIST',qw.allSongList)
    store.commit('UPDATAINDEX',i)
    // console.log(info)
    // store.commit('PUSHLIST',info)

    // sessionStorage.setItem('itemDetails',JSON.stringify(info))
  }
  return {qw,aaa,musicUrl}
}
}
</script>

<style lang="less" scoped>
.sheet{
  width:100%;
  .sheet-bg{
    position:relative;
    width:100%;
    height:56vh;
    filter: blur(3px);
    // background-image: url('@/assets/demo.png');
  }
 .sheet-bg1{   
 position:absolute;
 top:0;
.sheet-title{
  display: flex;
  justify-content: space-between;
  margin-top:.1rem;
  height:0.80rem;
    color:rgb(253, 250, 250);
  line-height:0.80rem;
  .sheet-title-left{
   .sheet-title-left-text{
     font-size:.43rem;
     margin-left:0.66rem;
   }
   .icon-zuojiantou{
     font-size:.56rem;
     margin-left:0.2rem;
   }
  }
  .sheet-title-right{
    text{
     font-size:.44rem;
    }
    text:nth-child(1){
      padding-right:0.66rem;
    }
     text:nth-child(2){
      padding-right:0.2rem;
    }
  }
}
.sheet-introduce{
  display:flex;
  width:100%;
 margin-top:0.6rem;
  .sheet-introduce-left{
  margin-left:0.3rem;
    img{
      width:2.6rem;
      height:2.6rem;
      border-radius: 13px;
    }
  }
  .sheet-introduce-right{
   margin-left:0.18rem;
.rigit-top{
  font-size:0.39rem;
  font-weight:600;
   color: white;

}
.rigit-center{
  position:relative;
  margin-top:0.2rem;
  .rigit-center-text{
    position:absolute;
    top:0.2rem;
    left:0.99rem;
    color:rgb(83, 80, 80);
  }
 img{
      width:0.8rem;
      height:0.8rem;
      border-radius: 100%;
 }
}
.rigit-end{
  margin-top:0.26rem;
  font-size:0.26rem;
  height:1rem;
  color:rgb(83, 80, 80);

  text{
     display: inline-block;
     width:95%;
     height:100%;
     overflow: hidden;
     text-overflow: ellipsis;

  }
}
  }
}
.sheet-icons{
  margin-top:0.6rem;
  height:1.5rem;
  display:flex;
  justify-content: space-around;

  text{
    font-size:0.8rem;
    color:white;
  }
}
  }
  .sheet-list{
    position: absolute;
    top:6.9rem;
    width:100%;
    background: rgb(255, 255, 255);
    border-radius: 18px;
  .sheet-list-title{
    display:flex;
    justify-content: space-between;
    margin-top:0.3rem;


    .sheet-list-title-left{

      text:nth-child(1){
        margin-left:0.1rem;
        font-size:0.46rem;
      }
      text:nth-child(2){
        font-size:0.32rem;
        font-weight:600;
        padding-left:0.6rem;
      }
       text:nth-child(3){
        font-size:0.23rem;
        color:rgb(114, 109, 109);
      }
    }
    .sheet-list-title-right{
      margin-right:0.18rem;
      width:3rem;
      height:0.8rem;
      text-align:center;
      background: red;
      border-radius: 23px;

      text{
        font-size: 0.32rem;
        line-height:0.8rem;
        color:white;
      }
    }
  }
  .sheet-list-body{
    width:100%;
    display:flex;
    justify-content: space-between;
    margin-top:0.2rem;
    margin-bottom:0.1rem;

    .sheet-list-body-left{
      width:0.6rem;
      // background: yellow;
      text-align: center;
      font-size: 0.33rem;
      line-height: 0.8rem;
    }
    .sheet-list-body-center{
      width:6rem;
      // background: chocolate;
      margin-left:0rem;

      div:nth-child(1){
        font-size:0.42rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color:rgb(51, 50, 50);
      }
      div:nth-child(2){
        font-size:0.33rem;
        color:rgb(99, 91, 91)
      }
    }
    .sheet-list-body-right{
      margin-right:0.2rem;
      height:0.9rem;
      // background: black;

      text{
        font-size:0.56rem;
        color:rgb(83, 80, 80);
        line-height:0.9rem;
      }
    }
  }
  .wd{
    height:1.3rem;
  }
  }
}
</style>